<template>
	<view :class="{
      border: border,
    }">
		<u-scroll-list :indicator="false">
			<view v-for="(item, index) in list" :key="index" class="button" :style="{
          padding: padding,
        }">
				<view :class="{
            activeButton: keyName == '' ? current == index : current == item[keyName],
            activeBold:
              (keyName == '' ? current == index : current == item[keyName]) && activeBold,
          }" @click="handleStatus(item, index)">{{ item[keyLabel] }}</view>
			</view>
		</u-scroll-list>
	</view>
</template>
<script>
	export default {
		props: {
			// 滚动数组
			list: {
				type: Array,
				default: [],
				required: true,
			},
			// 选中Item
			current: {
				type: [String, Number],
				default: "",
			},
			// 显示文字
			keyLabel: {
				type: String,
				default: "label",
			},
			// 绑定键 (不设置默认根据下标判断)
			keyName: {
				type: String,
				default: "",
			},
			// 下边框线
			border: {
				type: [Boolean, String],
				default: false,
			},
			// 选中加粗
			activeBold: {
				type: [Boolean, String],
				default: true,
			},
			// 内边距
			padding: {
				type: String,
				default: "0 20rpx 0 0",
			},
		},
		methods: {
			// 点击事件
			handleStatus(val, index) {
				this.$emit("click", {
					index,
					...val,
				});
			},
		},
	};
</script>
<style lang="scss" scoped>
	.button {
		view {
			min-width: 120rpx;
			height: 46rpx;
			line-height: 46rpx;
			text-align: center;
			padding: 0 20rpx;
			font-size: 24rpx;
			color: #555555;
			border-radius: 8rpx;
			background-color: #f9fcfc;
			white-space: nowrap;
		}

		.activeButton {
			color: $active-color;
			background-color: #e9f4f4;
		}
	}

	.activeBold {
		font-weight: 600;
	}

	.border {
		border-bottom: 1rpx solid #d9d9d999;
	}
</style>